<template>
	<view class="msg-detail">
		<view v-for="(item, id) in cntList" :key="item.key">
			<template
				v-if="!['change', 'add'].includes(item.key) || item.key === 'change' && changeList.length || item.key === 'add' && addList.length">
				<view class="title">{{ numCaps[id]}}、{{item.label}}</view>
				<view v-if="item.key === 'companyName'" class="text">{{companyName}}</view>
				<view v-if="item.key === 'updateTime'" class="text">{{updateTime}}</view>
				<view v-if="item.key === 'change'" class="table">
					<view class="table-row">
						<view v-for="col in changeColumns" :key="col.key" class="th" :style="{
							flexGrow: 1
						}">{{col.title}}</view>
					</view>
					<view v-for="(cItem, ci) in changeList" :key="ci" class="table-row">
						<view v-for="col in changeColumns" :key="col.key + '-' + ci" :style="{
							flexGrow: 1
						}" class="td">{{cItem[col.key] || '-'}}</view>
					</view>
				</view>
				<view v-if="item.key === 'add'" class="table">
					<view class="table-row">
						<view v-for="col in addColumns" :key="col.key" class="th" :style="{
							flexGrow: col.grow || 1
						}">{{col.title}}</view>
					</view>
					<view v-for="(aItem, ai) in addList" :key="ai" class="table-row">
						<view v-for="col in addColumns" :key="col.key + '-' + ai" :style="{
							flexGrow:  col.grow || 1
						}" class="td"> {{aItem[col.key] || '-'}}</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		getActionApi,
		readActionApi
	} from '@/api/follow.js'
	import {
		changeColumns,
		addColumns,
		Action_Cnt,
		numCaps
	} from './constant.js'
	export default {
		data() {
			return {
				changeColumns,
				addColumns,
				changeList: [],
				addList: [],
				companyName: '',
				updateTime: '',
				cntList: Action_Cnt,
				numCaps,
			}
		},
		onLoad({
			enterpriseId,
			batchNumber,
			changeType,
			companyName,
			createTime,
			id
		}) {
			this.getDetail({
				enterpriseId,
				batchNumber,
				changeType
			})
			this.companyName = companyName
			this.updateTime = createTime
			id && this.readAction(id)
		},
		methods: {
			// 标记阅读
			async readAction(actionId) {
				await readActionApi(actionId)
				uni.$emit('Read_Action')
			},
			// 查询动态详情
			async getDetail(params) {
				try {
					const { data = []} = await getActionApi(params)
	
					if (!data?.length) {
						this.changeList = []
						this.addList = []
						return
					}
					for (let i = 0; i < data.length; i++) {
						const itm = data[i]
						const operateType = itm.operateType
						if (operateType === 0) {
							this.changeList.push(itm)
						} else if (operateType === 1) {
							this.addList.push(itm)
						}
					}
				} catch {}
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.msg-detail {
		padding: 0 30rpx 30rpx;

		.table {
			margin: 10rpx 0 0;
			border: 2rpx solid #E5E5E5;
			border-width: 2rpx 0 0 2rpx;

			.table-row {
				display: flex;
			}

			.th,
			.td {
				text-align: center;
				padding-left: 8rpx;
				padding-right: 8rpx;
				border: 2rpx solid #E5E5E5;
				border-width: 0 2rpx 2rpx 0;
				flex: 1;
				word-break: break-word;
			}

			.th {
				color: #111;
				font-size: 28rpx;
				line-height: 40rpx;
				padding: 39rpx 0 33rpx;
				background-color: #F1F5F9;
			}

			.td {
				font-size: 26rpx;
				line-height: 37rpx;
				color: #666;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				justify-content: center;
				align-items: center;
				display: flex;
			}
		}

		.title {
			font-size: 32rpx;
			line-height: 45rpx;
			color: #333;
			font-weight: bold;
			padding-top: 30rpx;

			&.mr {
				margin-bottom: 20rpx;
			}
		}

		.text {
			margin-top: 10rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			color: #333;
		}
	}
</style>